<template>
  <dialog_item :dialogTitle="$t('work_week_list')" :visible.sync="standardDayVisible" :appendBody="true" :isNotShowDefaultBtn="true">
    <el-main>
      <el-row class="obpm-fromContent-title obpm-enterpriseDomain-logo" :gutter="24" >
        <!-- <el-col :span="12">{{$t('calendar')}}</el-col> -->
      </el-row>
      <!-- 工作日历列表 -->
      <el-table :data="standardDays.datas"
        ref="multipleTable"
        :row-key="handleReserve"
        @row-click="onRowClick"
        class="Trpointer"
        header-cell-class-name="tableHeaderbg">
        <!-- @selection-change="handleSelectionChange" -->
        <!-- @row-click="onRowClick" -->
        <!-- <el-table-column type="selection" width="55" ></el-table-column> -->
        <el-table-column :label="$t('calendarName')">
          <template slot-scope="scope">{{scope.row.calendar.name}}</template>
        </el-table-column>
        <el-table-column :label="$t('date')">
          <template slot-scope="scope">
            <div v-if="scope.row.weekDays === 0">
              {{$t('sunday')}}
            </div>
            <div v-else-if="scope.row.weekDays === 1">
             {{$t('monday')}}
            </div>
            <div v-else-if="scope.row.weekDays === 2">
               {{$t('tuesday')}}
            </div>
            <div v-else-if="scope.row.weekDays === 3">
               {{$t('wednesday')}}
            </div>
            <div v-else-if="scope.row.weekDays === 4">
               {{$t('thursday')}}
            </div>
            <div v-else-if="scope.row.weekDays === 5">
               {{$t('friday')}}
            </div>
            <div v-else-if="scope.row.weekDays === 6">
               {{$t('saturday')}}
            </div>
          </template>

        </el-table-column>
        <el-table-column prop="remark" :label="$t('run')">
          <template slot-scope="scope">{{scope.row.workingDay ? $t('weekdays') : $t('non_weekdays')  }}</template>

        </el-table-column>
        <el-table-column prop="remark" :label="$t('description')"></el-table-column>
      </el-table>
    </el-main>
    <standardDay_detail :visible.sync="standardDayDetailVisible"  v-if="standardDayDetailVisible" @exit="onExit" :content="content"/>
 
    </dialog_item>
</template>

<script>

import standardDay_detail from "@/components/standardDay_detail.vue";

export default {
  components:{
    standardDay_detail,
  },
  data(){
    return {
      standardDays:[],
      standardDayDetailVisible:false,
      content:{},
    }
  },
  props:["visible","detail"],
  computed:{
    standardDayVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  },
  created() {
    this.getData();
  },
  methods: {
    getData(){
      this.$api.getStandardDay(
        {domainid:this.$route.query.domainid,id:this.detail.id},
        {
          onSucess: resp => {
            this.standardDays = resp.data.data;
            this.$nextTick(() => {
            this.$refs.multipleTable.doLayout()
          })
          }
        }
      );
    },
    handleReserve(row){
      return row.id
    },
    onRowClick(row){
      this.content=JSON.parse(JSON.stringify(row));
      this.standardDayDetailVisible=true;
    },
    onExit(){
      this.standardDayDetailVisible=false;
      this.getData();

    },
  },
};
</script>
<style lang="scss" scoped>

</style>